<html>
<head>
	<base target="_blank"></base>
	<link href="/static/css/common.css" rel="stylesheet" type="text/css">
	<link href="/static/css/buttons.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="/static/js/jquery-1.7.1.js"></script>
	<script type="text/javascript" src="/static/js/jquery.easing.1.3.js"></script>
</head>
<body>
<style type="text/css">
.block-t{border:1px solid #AAA;width: 400px; height: 300px;position: absolute;top:100px;}
.gray1{background:#EDE;}
.gray2{background:#DDD;}
</style>
<div class="content">
	<div>
		<button onclick="animate()">Animate</button>
		<button onclick="reset()">Reset</button>
	</div>
	<div>
		<div id="i1" class="block-t gray1">
			
		</div>
		<div id="i2" class="block-t gray2"></div>
	</div>
</div>
<script>
var el1 = $('#i1'),
	el2 = $('#i2');
el1.css('left', -400);
el2.css('left',1200);
function animate(){
	var animateOption = {'easing':'easeOutBounce',duration:1200};
	el1.animate({left:'+=600'}, animateOption);
	el2.animate({left:'-=600'}, animateOption);

}
function reset(){
	el1.animate({'left': -400});
	el2.animate({'left': 1200});
}
</script>
</body>
</html>